<template>
  <div>
    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">商品类目销售分析</span>
          <el-form ref="form" :model="form" label-width="80px">
            <el-row style="text-align: right" v-model="form.data">
              <el-button size="small">导出数据</el-button>
              <el-button-group>
                <el-button size="small" @click="date(7)">最近7天</el-button>
                <el-button size="small" @click="date(30)">最近30天</el-button>
                <el-button size="small" @click="date(90)">最近90天</el-button>
              </el-button-group>
              <el-date-picker
                size="small"
                v-model="form.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData()"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-row>
          </el-form>
        </div>
      </el-header>
      <!--显示表格数据-->
      <!--商品类目分析图表-->
      <el-main>
        <div id="main" style="width: 100%;height:300px;"></div>
        <!--表格-->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="categoryId1" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="categoryName" label="一级分类名称" width="300">
          </el-table-column>
          <el-table-column prop="num" label="销售数量"> </el-table-column>
          <el-table-column width="200" label="数量比例">
            <template slot-scope="scope">
              {{ ((scope.row.num / totalNum) * 100).toFixed(0) }}%
            </template>
          </el-table-column>
          <el-table-column prop="money" label="销售金额"> </el-table-column>
          <el-table-column width="200" label="金额比例">
            <template slot-scope="scope">
              {{ ((scope.row.money / totalMoney) * 100).toFixed(0) }}%
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">商品销售情况</span>
          <el-form ref="form" :model="form2" label-width="80px">
            <el-row style="text-align: right" v-model="form2.data">
              <el-button size="small">导出数据</el-button>
              <el-button-group>
                <el-button size="small" @click="date2(7)">最近7天</el-button>
                <el-button size="small" @click="date2(30)">最近30天</el-button>
                <el-button size="small" @click="date2(90)">最近90天</el-button>
              </el-button-group>
              <el-date-picker
                size="small"
                v-model="form2.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="fetchData2()"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-row>
          </el-form>
        </div>
      </el-header>
      <!--显示表格数据-->
      <el-main>
        <!--表格-->
        <el-table :data="tableData2" style="width: 100%">
          <el-table-column label="商品名称" width="300">
            <template slot-scope="scope">
              <span v-for="(a, b) in scope.row.name.split(' ')" :key="a">
                <p v-if="b == 0">
                  {{ a }}
                </p>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="numVisitors" label="浏览量" width="200">
          </el-table-column>
          <el-table-column width="190" prop="numPeople" label="付款人数">
          </el-table-column>
          <el-table-column width="190" label="单品转化率">
            <template slot-scope="scope">
              {{ ((scope.row.num / scope.row.numVisitors) * 100).toFixed(0) }}%
            </template>
          </el-table-column>
          <el-table-column
            width="190"
            prop="num"
            label="销售数量"
          ></el-table-column>
          <el-table-column width="190" prop="money" label="销售金额">
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  data() {
    return {
      tableData: [], // 商品类目销售
      dateRange: [], // 日期选择器绑定的变量
      totalMoney: 0, // 销售总金额
      totalNum: 0, // 销售总数量
      legendData: [], // 图鉴
      numData: [], // 数量
      moneyData: [], // 金额
      form: {}, // 商品类目form
      tableData2: [], // 商品销售情况
      form2: {} // 商品销售情况
    };
  },
  methods: {
    // 类目查询
    async fetchData() {
      const categoryReportVo = {
        date1: this.form.date[0],
        date2: this.form.date[1]
      };

      const { data: res } = await this.$http.post(
        `vi/order/category/report/upDays`,
        categoryReportVo
      );
      this.tableData = res.data.tbCategoryReports;

      for (let i = 0; i < this.tableData.length; i++) {
        this.totalNum += this.tableData[i].num;
        this.totalMoney += this.tableData[i].money;
        this.legendData.push(this.tableData[i].categoryName);
        this.numData.push({
          value: this.tableData[i].num,
          name: this.tableData[i].categoryName
        });
        this.moneyData.push({
          value: this.tableData[i].money,
          name: this.tableData[i].categoryName
        });
      }

      // 初始化echarts容器
      var myChart = echarts.init(document.getElementById("main"));

      // echarts数据填充
      let option = {
        title: {
          text: "一级分类商品",
          x: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left",
          data: this.legendData
        },
        series: [
          {
            name: "销售量",
            type: "pie",
            radius: "35%",
            center: ["30%", "50%"],
            data: this.numData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          {
            name: "销售额",
            type: "pie",
            radius: "35%",
            center: ["80%", "50%"],
            data: this.moneyData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 销售情况查询
    async fetchData2() {
      const categoryReportVo = {
        date1: this.form2.date[0],
        date2: this.form2.date[1]
      };
      const { data: res } = await this.$http.post(
        `vi/order/statis/browseAndOrder`,
        categoryReportVo
      );
      this.tableData2 = res.data.browseAndOrder;
    },
    date(val) {
      const time = new Date(Date.now() - val * 24 * 60 * 60 * 1000);
      const time2 = new Date(Date.now());
      this.form.date = [];
      this.form.date.push(time);
      this.form.date.push(time2);

      this.fetchData();
      this.form = {};
    },
    date2(val) {
      const time = new Date(Date.now() - val * 24 * 60 * 60 * 1000);
      const time2 = new Date(Date.now());
      this.form2.date = [];
      this.form2.date.push(time);
      this.form2.date.push(time2);

      this.fetchData2();
      this.form2 = {};
    }
  }
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
